<template>
	<div class="taTableCard">
		<el-scrollbar :class="[hidePagination?'taTableCard-table-without-page':'taTableCard-table']"
			v-loading="loading">
			<div class="taTableCard-row">

				<template v-if="_size[0]=='auto'">
					<el-row>
						<div v-if="!hideAdd">
							<template v-if="!hasAddContent">
								<el-card class="task task-add" shadow="never" @click="handleAdd"
									:style="[{height:_row_height}]">
									<el-icon><el-icon-plus /></el-icon>
									<p v-if="addText">{{addText}}</p>
								</el-card>
							</template>
							<template v-else>
								<el-card class="task task-add" shadow="never" :style="[{height:_row_height}]">
									<slot name="add"></slot>
								</el-card>
							</template>
						</div>
						<div v-for="(item,index) in tableData" :key="item['rowKey'] || index">
							<el-card @click="handleCardClick(item,index)" class="task task-item" shadow="hover"
								:style="[{height:_row_height,'margin-left': (hideAdd && index>0 || !hideAdd ) ? '15px': ''}]">
								<slot :item="item"></slot>
								<template #footer v-if="showCardFooter">
									<slot name="footer" :item="item">

									</slot>
								</template>
							</el-card>
						</div>
					</el-row>
				</template>

				<el-row :gutter="15" v-else>
					<el-col :xl="_size[0]" :lg="_size[1]" :md="_size[2]" :sm="_size[3]" :xs="_size[4]" v-if="!hideAdd">
						<template v-if="$slots.add">
							<el-card class="task task-add" shadow="never" :style="[{height:_row_height}]">
								<slot name="add"></slot>
							</el-card>
						</template>
						<template v-else>
							<el-card class="task task-add" shadow="never" @click="handleAdd"
								:style="[{height:_row_height}]">
								<el-icon style="background-color: red;"><el-icon-plus /></el-icon>
								<p v-if="addText">{{addText}}</p>
							</el-card>
						</template>
					</el-col>
					<el-col :xl="_size[0]" :lg="_size[1]" :md="_size[2]" :sm="_size[3]" :xs="_size[4]"
						v-for="(item,index) in tableData" :key="item['rowKey'] || index">
						<el-card @click="handleCardClick(item,index)" class="task task-item" shadow="hover"
							:style="[{height:_row_height}]">
							<slot :item="item"></slot>
							<template #footer v-if="showCardFooter">
								<slot name="footer" :item="item">

								</slot>
							</template>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</el-scrollbar>
		<div class="taTableCard-page" v-if="!hidePagination">
			<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="taPageSize"
				:page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange"
				@update:page-size="pageSizeChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import config from "@/config/table";
	import {
		useSlots
	} from 'vue'
	export default {
		name: 'ta-table-card',
		components: {
			//saveDialog,
			//logs
		},

		props: {
			cardSize: {
				type: Array,
				default: [6, 6, 8, 12, 24]
			},
			apiObj: {
				type: Object,
				default: () => {}
			},
			addText: {
				type: String,
				default: ""
			},
			params: {
				type: Object,
				default: () => ({})
			},
			data: {
				type: Object,
				default: () => {}
			},
			rowHeight: {
				type: [String, Number],
				default: "220px"
			},
			pageSize: {
				type: Number,
				default: config.pageSize
			},
			pageSizes: {
				type: Array,
				default: config.pageSizes
			},
			paginationLayout: {
				type: String,
				default: config.paginationLayout
			},
			rowKey: {
				type: String,
				default: ""
			},
			showCardFooter: {
				type: Boolean,
				default: false
			},
			hideAdd: {
				type: Boolean,
				default: false
			},
			hidePagination: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: true,
				taPageSize: this.pageSize,
				emptyText: "暂无数据",
				total: 0,
				currentPage: 1,
				tableData: [],
				tableParams: this.params,
				summary: {},
				/*
								isActivat: true,
								toggleIndex: 0,
								prop: null,
								order: null,
								tableHeight: '100%',
								userColumn: [],
								customColumnShow: false,
								config: {
									size: this.size,
									border: this.border,
									stripe: this.stripe
								}*/
			}
		},
		watch: {
			data() {
				this.tableData = this.data;
				this.total = this.tableData.length;
			},
			apiObj() {
				this.tableParams = this.params;
				this.refresh();
			}
		},
		computed: {
			hasAddContent() {
				const slots = useSlots()
				console.error(slots)
				return Boolean(slots['add'])
			},
			selectedRows() {
				return this.tableData.filter(item => item.hasOwnProperty('$selected') && item.$selected);
			},
			_row_height() {
				return Number(this.rowHeight) ? Number(this.rowHeight) + 'px' : this.rowHeight
			},
			_size() {
				return [
					this.cardSize[0] || 6,
					this.cardSize[1] || 6,
					this.cardSize[2] || 8,
					this.cardSize[3] || 12,
					this.cardSize[4] || 24,
				];
			}
		},
		mounted() {
			if (this.apiObj) {
				this.getData();
			} else if (this.data) {
				this.tableData = this.data;
				this.total = this.tableData.length
			}
		},
		methods: {
			async getData() {
				this.loading = true;
				var reqData = {
					[config.request.page]: this.currentPage,
					[config.request.pageSize]: this.taPageSize,
					[config.request.prop]: this.prop,
					[config.request.order]: this.order
				}
				if (this.hidePagination) {
					delete reqData[config.request.page]
					delete reqData[config.request.pageSize]
				}
				Object.assign(reqData, this.tableParams)

				try {
					if (typeof this.apiObj.post === 'function') {
						var res = await this.apiObj.post(reqData);
					} else {
						var res = await this.apiObj.get(reqData);
					}
				} catch (error) {
					this.loading = false;
					this.emptyText = error.statusText;
					return false;
				}
				try {
					var response = config.parseData(res);
				} catch (error) {
					this.loading = false;
					this.emptyText = "数据格式错误";
					return false;
				}
				if (response.code != config.successCode) {
					this.loading = false;
					this.emptyText = response.msg;
				} else {
					this.emptyText = "暂无数据";
					if (this.hidePagination) {
						this.tableData = response.data.data || response.data || [];
					} else {
						this.tableData = response.data.data || response.data || [];
					}
					this.total = response.total || 0;
					this.summary = response.summary || {};
					this.loading = false;
				}
				this.$emit('dataChange', res, this.tableData)
			},
			//分页点击
			paginationChange() {
				this.getData();
			},
			//条数变化
			pageSizeChange(size) {
				this.taPageSize = size
				this.getData();
			},
			//刷新数据
			refresh() {
				this.getData();
			},
			//更新数据 合并上一次params
			upData(params, page = 1) {
				this.currentPage = page;
				Object.assign(this.tableParams, params || {})
				this.getData()
			},
			//重载数据 替换params
			reload(params, page = 1) {
				this.currentPage = page;
				this.tableParams = params || {}
				this.getData()
			},
			toggleAllSelection() {
				this.tableData.forEach(item => {
					item.$selected = true
				})
			},
			handleAdd() {
				this.$emit('add')
			},
			handleCardClick(item) {
				this.$emit('cardClick', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.taTableCard {
		height: 100%;
	}

	:deep(.el-card__body) {
		padding: 0px;
	}

	.taTableCard-table {
		height: calc(100% - 50px);
		flex-basis: 100%;
		padding: 15px;
		background-color: #f5f7f8;
	}

	.taTableCard-table-without-page {
		height: 100%;
		flex-basis: 100%;
		padding: 15px;
		background-color: #f5f7f8;
	}

	.taTableCard-row {
		width: calc(100% - 15px);
	}

	.taTableCard-page {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}

	.task {
		height: auto;
		display: flex;

		:deep(.el-card__body) {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}

	.task-item h2 {
		font-size: 15px;
		color: #3c4a54;
		padding-bottom: 15px;
	}

	.task-item li {
		list-style-type: none;
		margin-bottom: 10px;
	}

	.task-item li h4 {
		font-size: 12px;
		font-weight: normal;
		color: #999;
	}

	.task-item li p {
		margin-top: 5px;
	}

	.task-item .bottom {
		border-top: 1px solid #EBEEF5;
		text-align: right;
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.task-add {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor: pointer;
		color: #999;
	}

	.task-add:hover {
		color: #409EFF;
	}

	.task-add i {
		font-size: 30px;
	}

	.task-add p {
		font-size: 12px;
		margin-top: 20px;
	}

	.dark .task-item .bottom {
		border-color: var(--el-border-color-light);
	}
</style>
